import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
// 一个一劳永逸的方法就是将 BrowserRouter路由器包裹在最外面的一层
import './index.css'
import App from './App'
// reportWebVitals.js里面是用于记录页面的性能的
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './redux/store'

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

ReactDOM.render(
	// React.StrictMode 包裹一下之后 会帮我们分析APP里面的所有组件是否有写的不合理的地方  如还使用字符串形式的ref等等

	// HashRouter 这个路由器会导致 state传参 刷新页面的时候数据丢失 因为HashRouter没有使用 H5的 history API 没有人帮忙记这个 所以会丢失
	// 最外层包裹路由器
	<BrowserRouter>
		<React.StrictMode>
			{/* 借助 Provider 这个组件的手  批量的给所有的容器组件都加上 store */}
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	</BrowserRouter>,
	document.getElementById('root')
)

// store 监听redux中数据的改变 数据一该百年 重新渲染APP组件 当使用react-redux这个库了之后 容器组件就会自动的监听 store 的变化  我们就不需要自己手动的监听了
// store.subscribe(() => {
// 	ReactDOM.render(
// 		// React.StrictMode 包裹一下之后 会帮我们分析APP里面的所有组件是否有写的不合理的地方  如还使用字符串形式的ref等等

// 		// HashRouter 这个路由器会导致 state传参 刷新页面的时候数据丢失 因为HashRouter没有使用 H5的 history API 没有人帮忙记这个 所以会丢失
// 		// 最外层包裹路由器
// 		<BrowserRouter>
// 			<React.StrictMode>
// 				<App />
// 			</React.StrictMode>
// 		</BrowserRouter>,
// 		document.getElementById('root')
// 	)
// })
